{extend name="base" /}
{block name="css"}
{css href="__CSS__/pay.css" /}
<style>
    body, html{background:var(--swiper-theme-color)}
    .weui-footer p,.weui-footer p a{color: #fff;}
</style>
{/block}
{block name="body"}
<!-- 主要内容 开始 -->
<div class="weui-tab_bd-item">
    <header class="weui-navBar weui-navBar-fixed">
        <a href="javascript:history.go(-1);" class="weui-navBar-item">
            <i class="icon iconfont icon-fanhui"></i>
        </a>
        <div class="weui-center">
            <span class="weui-center-title f-white">付款码</span>
        </div>
        <a href="javascript:;" class="weui-navBar-item">
        </a>
    </header>
    <div class="page-bd">
        <ul class="collapse">
            <li class="js-show">
                <div class="weui-flex js-category" >
                    <span class="icon iconfont icon-caiwuguanli f-green"></span>
                    <div class="weui-flex__item f-green">向商家付款</div>
                    <i class="icon iconfont icon-fanhui f-green"></i>
                </div>
                <div class="page-category js-categoryInner">
                    <div class="weui-cells page-category-content">
                        <p class="content">点击查看付款码数字</p>
                        <div class="main">
                            <img src="__IMG__/barcode.jpg" class="barcode" alt="">
                            <img src="__IMG__/qrcode.jpg"  class="qrcode" alt="">
                        </div>
                        <p class="weui-footer__links">
                            <a class="weui-footer__link">
                                (01)95012345678903(3102)000400
                                <span>更换</span>
                            </a>
                        </p>
                    </div>
                </div>
            </li>
            <li class="orange">
                <div class="weui-flex js-category" >
                    <span class="icon iconfont icon-fufei"></span>
                    <div class="weui-flex__item" >我要收款</div>
                    <i class="icon iconfont icon-gengduo"></i>
                </div>
                <div class="page-category js-categoryInner">
                    <div class="weui-cells page-category-content">
                        <p class="content">点击查看付款码数字</p>
                        <div class="main">
                            <img src="__IMG__/qrcode.jpg" class="qrcode" alt="">
                        </div>
                        <p class="weui-footer__links">
                            <a class="weui-prompt weui-footer__link">设置金额</a>
                            <a class="weui-picture weui-footer__link">保存图片</a>
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<!-- 主要内容 结束 -->
{/block}
{block name="js"}
<script type="text/javascript">
$(function(){
    //收付款切换
    $('.weui-flex').click(function(){
        $parent = $(this).parent('li');
        if(!$parent.hasClass('js-show')){
            $parent.siblings().removeClass('js-show');
            $parent.addClass('js-show');
            $(this).children('i').removeClass('icon-fanhui').addClass('icon-gengduo');
            $parent.siblings().find('i').removeClass('icon-gengduo').addClass('icon-fanhui');
        }
    });
    $('.weui-prompt').click(function(){
        $.prompt({
            title: "请输入收款金额！",
            onOK: function(text) {
                $.alert("您的收款金额是:"+text, "设定成功");
            },
            onCancel: function() {
            },
            input: '0.01'
        });
    });
    $('.weui-picture').click(function(){
        $.alert('保存成功','');
    });
});
</script>
{/block}